<template>
  <template v-if="userList">
    <van-card v-for="user in userList"
              :key="user.id"
              :desc="user.profile"
              :title="user.userName"
              :thumb="user.avatarUrl"
              :tag="formatGender(user.gender)"
              :centered="true"
    >
      <template #tags>
        <van-tag plain type="danger" v-for="tag in user.tags" style="margin: 3px">{{ tag }}</van-tag>
      </template>
    </van-card>
    <van-empty v-if="!userList || userList.length < 1" image="search" description="搜索结果为空" />
  </template>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import myAxios from '../plugins/myAxios.ts';
import type {UserType} from "../models/user";

const route = useRoute();
const { tags } = route.query;
const userList = ref();

// 向后端请求数据
onMounted( async () => {
  const userListData:UserType[] = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags,
    },
  }).then( (res:any) => {
    if (res.code === 0) {
      console.log(res);
    }
    return res.data;
  }).catch( (err:any) => {
    console.log(err);
  })
  if (userListData) {
    // 将返回的数据中的tags的JSON字符串转换为数组
    userListData.forEach( (user:UserType) => {
      user.tags = JSON.parse(user.tags);
    })
    userList.value = userListData;
  }
})

const formatGender = (gender: number) => {
  return gender === 1? '男' : gender === 0? '女' : '未知';
}

</script>

<style scoped>

</style>